<template>
  <div class="home">
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <a-card title="快速创建">
          <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            layout="vertical"
          >
            <a-form-item label="项目名称" name="name">
              <a-input v-model:value="formState.name" />
            </a-form-item>
            
            <a-form-item label="项目描述" name="description">
              <a-textarea v-model:value="formState.description" :rows="4" />
            </a-form-item>
            
            <a-form-item label="优先级" name="priority">
              <a-radio-group v-model:value="formState.priority">
                <a-radio-button value="low">低</a-radio-button>
                <a-radio-button value="medium">中</a-radio-button>
                <a-radio-button value="high">高</a-radio-button>
              </a-radio-group>
            </a-form-item>
            
            <a-form-item label="开始日期" name="startDate">
              <a-date-picker 
                v-model:value="formState.startDate" 
                style="width: 100%"
              />
            </a-form-item>
            
            <a-form-item>
              <a-button type="primary" @click="onSubmit">创建项目</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      
      <a-col :span="12">
        <a-card title="项目统计">
          <a-statistic-card>
            <a-statistic
              title="总项目数"
              :value="projectStats.total"
              style="margin-right: 32px"
            />
            <a-statistic
              title="进行中"
              :value="projectStats.inProgress"
              :value-style="{ color: '#3f8600' }"
            />
            <a-statistic
              title="已完成"
              :value="projectStats.completed"
              :value-style="{ color: '#cf1322' }"
              style="margin: 0 32px"
            />
          </a-statistic-card>
          
          <a-divider />
          
          <h4>最近活动</h4>
          <a-timeline>
            <a-timeline-item v-for="activity in activities" :key="activity.id">
              {{ activity.content }}
              <span style="color: #999">{{ activity.time }}</span>
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </a-col>
    </a-row>
    
    <a-modal
      v-model:visible="successModalVisible"
      title="创建成功"
      @ok="handleSuccessModalOk"
    >
      <p>项目已成功创建！</p>
      <p>项目名称: {{ formState.name }}</p>
      <p>开始日期: {{ formState.startDate?.format('YYYY-MM-DD') }}</p>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance } from 'ant-design-vue';
import dayjs from 'dayjs';

const formRef = ref<FormInstance>();
const successModalVisible = ref(false);

const formState = reactive({
  name: '',
  description: '',
  priority: 'medium',
  startDate: null as dayjs.Dayjs | null,
});

const rules = {
  name: [{ required: true, message: '请输入项目名称' }],
  description: [{ required: true, message: '请输入项目描述' }],
  priority: [{ required: true, message: '请选择优先级' }],
  startDate: [{ required: true, message: '请选择开始日期' }],
};

const projectStats = reactive({
  total: 12,
  inProgress: 5,
  completed: 7,
});

const activities = ref([
  { id: 1, content: '张三创建了新项目"数据分析平台"', time: '2小时前' },
  { id: 2, content: '李四完成了项目"用户管理系统"', time: '4小时前' },
  { id: 3, content: '王五更新了项目"移动端APP"的状态', time: '1天前' },
]);

const onSubmit = () => {
  formRef.value?.validate().then(() => {
    // 在实际应用中，这里会调用API保存数据
    console.log('表单数据:', formState);
    successModalVisible.value = true;
  });
};

const handleSuccessModalOk = () => {
  successModalVisible.value = false;
  // 重置表单
  formRef.value?.resetFields();
};
</script>